<template>
  <div class="content">
      <div class="ml" v-if="tabData.length">
        <div class="blogList">
          <div
            class="line"
            v-for="item in tabData"
            :key="item.id"
            @click="goDetail(item)"
          >
            <div class="center">
              <el-image
                style="width: 100px; height: 100px"
                :src="item.imgpath"
                fit="contain"
              ></el-image>
            </div>
            <div class="bl">
              <div class="btitle">{{ item.sourceName }}</div>
              <div class="bdr">{{ item.sourceDesc | ellipsis }}</div>
            </div>
            <div class="br">
              <div class="ct">
                <div>作者：{{ item.userName }}</div>
                <div>{{ item.createtime }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="page">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="pageData.pageCount"
            :page-size="pageData.pageSize"
            :current-page="pageData.currenPage"
            @current-change="handPage"
          >
          </el-pagination>
        </div>
      </div>
      <div class="ml" v-if="!tabData.length">
        <el-empty :image-size="200"></el-empty>
      </div>
    </div>
</template>

<script>
export default {
    filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 8) {
        return value.slice(0, 8) + "...";
      }
      return value;
    },
  },
  data(){
      return{
          tabData:[],
          postData:{
              str:'all'
          },
          pageData:{}
      }
  },
  methods:{
      getFileList(){
          this.API.getFileList(this.postData).then(res=>{
              if(res.message.code == 200){
                  this.tabData = res.data.pageData || []
                  this.tabData.map(item=>{
                      if(item.filepath.indexOf("doc")!=-1){
                          item.imgpath = "/DOC.svg"
                      }else if(item.filepath.indexOf("docx")!=-1){
                          item.imgpath = "/DOCX.svg"
                      }else if(item.filepath.indexOf("pdf")!=-1){
                          item.imgpath = "/PDF.svg"
                      }else if(item.filepath.indexOf("txt")!=-1){
                          item.imgpath = "/txt.svg"
                      }else if(item.filepath.indexOf("xlsx")!=-1){
                          item.imgpath = "/XLSX.svg"
                      }else if(item.filepath.indexOf("xls")!=-1){
                          item.imgpath = "/XLS.svg"
                      }else if(item.filepath.indexOf("xml")!=-1){
                          item.imgpath = "/xml.svg"
                      }else if(item.filepath.indexOf("zip")!=-1){
                          item.imgpath = "/zip.svg"
                      }else if(item.filepath.indexOf("rar")!=-1){
                          item.imgpath = "/rar.svg"
                      }
                  })
                  const { currenPage, hasNext, hasPre, pageCount, pageSize } = res.data;
                    this.pageData.currenPage = currenPage;
                    this.pageData.hasNext = hasNext;
                    this.pageData.hasPre = hasPre;
                    this.pageData.pageCount = pageCount;
                    this.pageData.pageSize = pageSize;
              }
              console.log("dd",this.tabData)
          })
      },
      handPage(){},
      goDetail(){}
  },
  mounted(){
      this.getFileList()
  }
};
</script>

<style lang="less" scoped>
.page {
  margin-top: 20px;
  text-align: center;
}
.content {
  display: flex;
  .ml {
    flex: 1;
    margin-right: 20px;
    //   border:1px solid #ccc;
    .blogList {
      display: flex;
      flex-direction: column;
      .line:hover {
        background: #f8f9fa;
      }
      .line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        padding: 15px;
        cursor: pointer;
        .center {
          width: 120px;
        }
        .bl {
          display: flex;
          flex-direction: column;
          // justify-content: flex-start;
          // align-items: center;
          flex: 1;
          .btitle {
          }
          .bdr {
            color: #ccc;
            margin: 10px 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .br {
          .ct {
            line-height: 30px;
            color: #ccc;
          }
        }
      }
    }
  }
}
</style>